<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '#' }">
                运动会比赛成绩管理
            </el-breadcrumb-item>
            <el-breadcrumb-item>
                <a href="#">全能总分名次</a>
            </el-breadcrumb-item>
        </el-breadcrumb>

        <el-card class="all-card">
            <el-row>
                <el-col :span="6">
                    <el-form>
                        <el-form-item label="全能项目：">
                            <el-select v-model="allitem" placeholder="请选择" @change="selItemName">
                                <el-option v-for="(item, index) in gamData" :key="index + 1"
                                    :label="index + 1 + '.' + item.sexName + ' ' + item.girdName + ' ' + item.qmsidName + ' ' + item.stidName"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-col>
                <!-- <el-col :span="2">
                    <el-button type="primary">总分/排名</el-button>
                </el-col> -->
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-table :data="allData" height="70vh" border stripe highlight-current-row
                        @current-change="handleCurrentChange" ref="myTable">
                        <el-table-column type="index" label="序号" width="60" align="center">
                        </el-table-column>
                        <el-table-column prop="plidName" label="姓名" align="center">
                        </el-table-column>
                        <el-table-column prop="tiidName" label="参赛单位" width="250" align="center">
                        </el-table-column>
                        <el-table-column prop="totalfen" label="总分" align="center">
                        </el-table-column>
                        <el-table-column label="名次" align="center">
                            <template #default="scope">
                                {{ scope.row.no === 0 ? '' : scope.row.no }}
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="1"></el-col>
                <el-col :span="12" class="col_sp3">
                    <el-table :data="singleData" height="70vh" border stripe>
                        <el-table-column type="index" label="序号" width="60" align="center">
                        </el-table-column>
                        <el-table-column prop="msidName" label="比赛项目" width="250" align="center">
                        </el-table-column>
                        <el-table-column prop="scoreTime" label="成绩" align="center">
                        </el-table-column>
                        <el-table-column prop="df" label="项目得分" align="center">
                        </el-table-column>
                        <el-table-column label="名次" align="center">
                            <template #default="scope">
                                {{ scope.row.rak === 0 ? '' : scope.row.rak }}
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            gamData: [],
            allData: [],
            singleData: [],
            allitem: null,
            perfrom: {
                single: ''
            },
            getmsg: {},
        }
    },
    created() {
        this.postALLtoundList()
    },
    methods: {
        // 查询数据
        async postALLtoundList() { // 项目
            try {
                const result = await this.$http.post(this.BACKEND_URL + '/show/getquannegmsg');
                if (result.data.code == 0) {
                    this.gamData = result.data.data
                    this.allitem = this.gamData[0].id
                    this.postQuannengList()
                } else if (result.data.code == 500) {
                    console.log(result.data.msg)
                }
            } catch (error) {
                if (error === undefined) {
                    this.$message.error('连接错误-获取数据失败');
                }
            }
        },
        async postQuannengList() { // 数据
            this.getmsg = this.gamData.find(item => item.id === this.allitem)
            const result = await this.$http.post(this.BACKEND_URL + '/quanneng/getmsg', this.getmsg);
            if (result.data.code == 0) {
                this.allData = result.data.data
                this.$refs.myTable.setCurrentRow(this.allData[0]);
            } else if (result.data.code == 500) {
                console.log(result.data.msg)
            }
        },
        // 项目选择
        selItemName(val) {
            this.postQuannengList()
        },
        // 左边表格选择
        handleCurrentChange(val) {
            if (val === null) {
                this.singleData = []
            } else {
                this.singleData = val.matchrecdataVos
            }
        },
    }
}
</script>

<style lang="less" scoped>
.all-card {
    margin-top: 15px;

    .el-select {
        width: 400px;
    }
}

.col_sp3 {
    .el-input {
        width: 150px;
    }
}
.paging{
    margin-top: 15px;
}
</style>